<template>
	<div>
		<div id="cesiumContainer"></div>
	</div>
</template>
<script>

export default {
	data () {
		return {
		}
	},
	mounted (){
		//加载谷歌地球影像
		// var google = new Cesium.UrlTemplateImageryProvider({
    //       url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
    // });
		// var osm = new Cesium.OpenStreetMapImageryProvider({
    // url : 'https://a.tile.openstreetmap.org/'
		// });
		var viewer = new Cesium.Viewer('cesiumContainer');
		// var viewer = new Cesium.Viewer('cesiumContainer', {
			// baseLayerPicker: true,
			// imageryProvider: osm,
			//加载地形
			// terrainProvider : Cesium.createWorldTerrain()
			// terrainProvider : new Cesium.CesiumTerrainProvider({
      //  	 	url : Cesium.IonResource.fromAssetId(3956),
      //   	requestVertexNormals : true
    	// })
		// });
		//隐藏版权
		viewer._cesiumWidget._creditContainer.style.display = 'none';
		//设置视角
		/* 
		viewer.camera.setView({
			//不知道那个地方的位置 
			destination: Cesium.Cartesian3.fromDegrees( -74.01881302800248, 40.69114333714821, 753),
			//观察角度
			orientation: {
				heading: Cesium.Math.toRadians(0, 0),//default north(0, 0)左右摆头
				pitch: Cesium.Math.toRadians(-90.0),//default value( -90 looking down 90 up)上下抬头
				roll: 0.0//default value用的很少不说了
			},	
		});
		*/
		//深度测试，值true时，球体会有高程遮挡效果（在没有地形时候也会有高程遮挡效果）。打开深度检测，那么在地形以下的对象不可见
		viewer.scene.globe.depthTestAgainstTerrain = true;
		//加载3Dtiles数据 没有这个条件，就不能有3D建筑样式
		/*
		var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
     	//url : 'http://localhost:8002/tilesets/Seattle/tileset.json'
	  //这里可以对url地址进行封装，封装后的可以写成 具体上下应该不是同一组数据 只是介绍这种方法
			url: Cesium.IonResource.fromAssetId(75343)
		}));
		*/
		//设置建筑物的样式
		// var defaultStyle = new Cesium.Cesium3DTileStyle({
    // color : "color('white', 0.3)",
    // show : true
		// });
		// 下面根据建筑物的高度设置样式 更加鲜明
		/*
		var heightStyle = new Cesium.Cesium3DTileStyle({
    	color : {
        conditions : [
          ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
          ["${Height} >= 200", "rgb(102, 71, 151)"],
          ["${Height} >= 100", "rgb(170, 162, 204)"],
          ["${Height} >= 50", "rgb(224, 226, 238)"],
          ["${Height} >= 25", "rgb(252, 230, 200)"],
          ["${Height} >= 10", "rgb(248, 176, 87)"],
          ["${Height} >= 5", "rgb(198, 106, 11)"],
          ["true", "rgb(127, 59, 8)"]
        ]
    	}
		});
		*/
		//上面只是设置样式 下面是把样式给具体建筑物
		// tileset.style = defaultStyle;
		// tileset.style = heightStyle;
		//让地图贴地 不知道这种能不能实现 
// 		var geojsonOptions = {
// 			clampToGround: true
// 		};
// 		var samplePromise = new Cesium.GeoJsonDataSource.load('../../public/assets/SampleData/ne_10m_us_states.topojson', geojsonOptions);//导入数据
	
//     samplePromise.then(function (dataSource) {  
//       viewer.dataSources.add(dataSource);//把数据加到场景里面去
//       var entities = dataSource.entities.values;//已经加入了数据的区块对象，entities属性就是区块的信息，value就是区块数组
//       //var neighborhoodsEntities = dataSource.entities.values;//区块数组
//         for (var i = 0; i < entities.length; i++) {  //遍历每一个区块 为他们加颜色
//           var entity = entities[i];//每一个建筑
//           if(Cesium.defined(entity.polygon)){//entity.polygon每一个组成建筑的几何体
//             entity.name = entity.properties.neighborhood; 
//             entity.polygon.material = Cesium.Color.fromRandom({  //修改每一个多边形的材质
//               red: 0.1,
//               maximumGreen: 0.5,
//               maximumBlue: 0.5,
//               alpha : 0.6
//             });
//             entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN; //区块直接贴在地面上
//             var polyPostions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions; //从多边形上取出他的顶点
//             var polyCenter = Cesium.BoundingSphere.fromPoints(polyPostions).center;  //通过顶点构建一个包围球
//             polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);   //把包围球的中心做贴地偏移，把点贴地
//             entity.position = polyCenter;//把贴地的包围球放到区块顶点的位置 就是与区块大范围贴合
//             entity.label = {   //创建一个标签，在中心点位置
//               text : entity.name,
//               showBackground : true,
//               scale:0.6,
//               horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
//               verticalOrigin:Cesium.verticalOrigin.BOTTOM,
//               distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0,8000.0),
//               disableDepthTestDistance:100.0
//             };
//           }
//         }
//     })
// 	}
// }
/*
//Example 3: Apply custom graphics after load.
  //Seed the random number generator for repeatable results.
  Cesium.Math.setRandomNumberSeed(0);//为geojson中的各个要素设置不同的渲染方式 随机颜色
  var promise = Cesium.GeoJsonDataSource.load( "../../assets/SampleData/ne_10m_us_states.topojson");
	promise.then(function (dataSource) {
    viewer.dataSources.add(dataSource);
      //Get the array of entities
    var entities = dataSource.entities.values;
		var colorHash = {};
      for (var i = 0; i < entities.length; i++) {

        //For each entity, create a random color based on the state name.
        //Some states have multiple entities, so we store the color in a
        //hash so that we use the same color for the entire state.
        var entity = entities[i];
        var name = entity.name;
        var color = colorHash[name];//如果name相同，则赋同一个颜色
        if (!color) {
          color = Cesium.Color.fromRandom({
            alpha: 1.0,
          });
          colorHash[name] = color;
        }

        //Set the polygon material to our random color.
        entity.polygon.material = color; // 设置polygon对象的填充颜色
        //Remove the outlines.
        entity.polygon.outline = false;

        //Extrude the polygon based on the state's population.  Each entity
        //stores the properties for the GeoJSON feature it was created from
        //Since the population is a huge number, we divide by 50.
        entity.polygon.extrudedHeight = entity.properties.Population / 100.0;
			}
    })
  */
  }	
}
</script>
<style scoped>

</style>